<template>
  <dv-border-box-8>
    <dv-decoration-7 style="width: 100%; height: 30px"
      >销售计划</dv-decoration-7
    >
    <div id="SalePlan" style="width: 100%; height: 270px"></div>
  </dv-border-box-8>
</template>

<script>
// import { getSaleAchieveRate } from "@/api/dv/carbon";

export default {
  name: "SalePlan",
  mounted() {
    this.initEchart();
  },
  methods: {
    
    initEchart() {
     
        let myChart = this.$echarts.init(
          document.getElementById("SalePlan"),
          "dark"
        );

        let option = {
          backgroundColor: "",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["已销售", "计划销售", "完成率"],
          },
          xAxis: [
            {
              type: "category",
              data: [
                "2023-01",
                "2023-03",
                "2023-05",
                "2023-07",
                "2023-09",
                "2023-11",
              ],
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "销售数量",
              min: 0,
              max: 21000,
              interval: 3000,
              axisLabel: {
                formatter: "{value} 万",
              },
            },
            {
              type: "value",
              name: "完成率",
              min: 0,
              max: 100,
              interval: 5,
              axisLabel: {
                formatter: "{value} %",
              },
            },
          ],
          series: [
            {
              name: "已销售",
              type: "bar",
              tooltip: {
                valueFormatter: function (value) {
                  return value + " ml";
                },
              },
              data: [0, 0, 0, 0, 1999070.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            },
            {
              name: "计划销售",
              type: "bar",
              tooltip: {
                valueFormatter: function (value) {
                  return value + " ml";
                },
              },
              data: [
                2.6, 5.9, 9.0, 26.4, 2999, 2894, 175.6, 182.2, 48.7, 18.8, 6.0,
                2.3,
              ],
            },
            {
              name: "完成率",
              type: "line",
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + " °C";
                },
              },
              data: [0, 0, 0, 0, 100, 0, 0, 23.4, 23.0, 16.5, 12.0, 6.2],
            },
          ],
        };
        option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
</style>
